'use strict';

import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import { Router, Route } from 'react-router-dom'
import createHistory from "history/createBrowserHistory"
import {
  TextField,
  Button,
  CircularProgress,
  FormControlLabel,
  Checkbox,
  Snackbar,
} from '@material-ui/core'

import NavBar from './menu'
import DiagnosisDesk from './router/diagnosisdesk'
import DiagnosisHistory from './router/diagnosishistory'

const electron = window.require('electron')
const history = createHistory()

const styles = theme => ({
  menu: {
    width: 48,
    height: '100%',
    position: 'fixed',
    top: 0,
    paddingTop: 10,
    left: 0,
    backgroundColor: '#292c33'
  },
  statusbar: {
    height: 16,
    width: '100%',
    position: 'fixed',
    bottom: 0,
    left: 0,
    backgroundColor: '#1D1F22'
  },
  root: {
    position: 'absolute',
    top: 0,
    left: 48,
  }
});

class MainBox extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      patients: []
    }
  }
  
  render() {
    const { classes } = this.props
    return (
      <Router history={history}>
        <div style={{ zoom: parseFloat(electron.screen.getPrimaryDisplay().workAreaSize.width / 1366.0) }}>
          <div className={classes.menu}>
            <NavBar history={history}/>
          </div>
          <div className={classes.statusbar}>
          </div>
          <div className={classes.root}>
            <Route path="/diagnosis/:_id" component={DiagnosisDesk} />
          </div>
          <div className={classes.root}>
            <Route path="/diagnosisHistory" component={DiagnosisHistory} />
          </div>
        </div>
      </Router>
    )
  }
}

MainBox.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(MainBox);